<template>
    <div>
        <Card>
            <!--查询条件-->
            <Row class="form-row">
                <Form :model="filters" ref="form_query" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称" prop="name">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" @change="housechange" filterable default-first-option
                                       placeholder="请选择小区" :clearable="true" no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="用户昵称">
                        <div class="filters-input">
                            <Input type="text" v-model="filters.userNick" placeholder="请输入用户昵称" class="normal-input" clearable></Input>
                        </div>
                    </FormItem>
                    <FormItem label="用户姓名">
                        <div class="filters-input">
                            <Input type="text" v-model="filters.userName" placeholder="请输入用户姓名" class="normal-input" clearable></Input>
                        </div>
                    </FormItem>
                    <FormItem label="手机号">
                        <div class="filters-input">
                            <Input type="text" v-model="filters.cellPhone" placeholder="请输入手机号" class="normal-input" clearable></Input>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="loadData">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <!--数据展示-->
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" @expand-change="queryRoomInfo" style="width: 100%">
                <template slot="empty">暂无数据</template>

                <el-table-column prop="roomInfo" label="房间信息"></el-table-column>
                <el-table-column label="用户头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.userHead"  min-width="44" height="44"/>
                    </template>
                </el-table-column>
                <el-table-column prop="userNick" label="用户昵称"></el-table-column>
                <el-table-column prop="userName" label="业主姓名"></el-table-column>
                <el-table-column label="用户身份">
                    <template slot-scope="scope">
                        <p v-if="scope.row.userIdentity == 1" style="color:green">业主</p>
                        <p v-if="scope.row.userIdentity == 2" style="color:blue">家属</p>
                        <p v-if="scope.row.userIdentity == 3" style="color:yellowgreen">租客</p>
                        <p v-if="scope.row.userIdentity == 4" style="color:red">短期租客</p>
                    </template>
                </el-table-column>
                <el-table-column prop="cellPhone" label="联系电话"></el-table-column>
                <el-table-column label="账号类型">
                    <template slot-scope="scope">
                        <p v-if="scope.row.userType == 1" style="color:green">微信</p>
                        <p v-if="scope.row.userType == 2" style="color:blue">支付宝</p>
                    </template>
                </el-table-column>
                <el-table-column label="认证状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.isEffective == -1" style="color:blue">未认证</p>
                        <p v-if="scope.row.isEffective == 1" style="color:green">已认证</p>
                        <p v-if="scope.row.isEffective == 2" style="color:red">认证拒绝</p>
                        <p v-if="scope.row.isEffective == 3" style="color:yellowgreen">待认证</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" v-show="scope.row.isEffective!=1" @click="operation(scope.row.id,1)">同意</el-button>
                        <el-button size="mini" type="danger" v-show="scope.row.isEffective!=1" @click="operation(scope.row.id,2)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                pageTotal:0,
                pageNum:1,
                pageSize:10,
                tableLoading:false,

                houseList:[],
                tableData:[],
                roomsInfo:[],


                filters:{
                    housingId:"",
                    userNick:"",
                    userName:"",
                    cellPhone:"",
                },
            }
        },
        created:function(){
            this.gethouse();
        },

        methods:{
            gethouse() {
                this.postRequest("/api/housing/getHousingByLogin").then(res => {
                    this.houseList = res;
                    this.filters.housingId = res[0].id;
                    this.housechange(this.filters.housingId);
                });
            },
            housechange:function(){
                this.loadData();
            },
            loadData:function(){
                let params="&userNick="+this.filters.userNick+"&userName="+this.filters.userName+"&cellPhone="+this.filters.cellPhone;
                this.getRequest("/api/cumc/auditingLoadData?housingId="+this.filters.housingId+"&pageNum="+this.pageNum+"&pageSize="+this.pageSize+params).then(resp=>{
                    this.tableData=resp.data.list;
                    this.pageNum=resp.data.pageNum;
                    this.pageTotal=resp.data.total;
                });
            },
            queryRoomInfo:function(row,expandedRows){
                this.roomsInfo=[];
                if (expandedRows.length > 1) {
                    expandedRows.shift();
                    this.getRequest("/api/cumc/rooms?userId=" + row.userId+"&housingId="+this.filters.housingId).then(resp => {
                        if (resp.code == 20000) {
                            this.roomsInfo = resp.data;
                        }
                    });
                } else {
                    this.getRequest("/api/cumc/rooms?userId=" + row.userId+"&housingId="+this.filters.housingId).then(resp => {
                        if (resp.code == 20000) {
                            this.roomsInfo = resp.data;
                        }
                    });
                }
            },
            operation:function(id,status){
                let params={};
                params.id=id;
                params.status=status;
                this.postRequest("/api/cumc/room",params).then(resp=>{
                    if (resp.code==20000){
                        this.$Message.success("操作成功");
                        this.loadData();
                    }
                });
            },
            handlePage:function (value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize:function (value) {
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>
